<template>
  <div class="app-container workbench-content">
    <div class="show_work_data">
      <div class="show_worker_info">
        <el-avatar :size="50"
          :src="curUserInfo.avatar"></el-avatar>
        <div class="worker_info_deteil">
          <div class="worker_info_1">{{timeStr}}好，{{curUserInfo.nickName || '--'}}，欢迎登陆工作台！</div>
          <div class="worker_info_2">
            {{curUserInfo.postName || ''}}
            <span class="ml10 mr10"
              v-if="curUserInfo.postName">|</span>
            <!-- {{curUserInfo.storeName || '--'}} -->
            <el-select v-model="selectStoreId"
              placeholder="请选择"
              size="mini"
              @change="selectStoreChange">
              <el-option :value="item.storeUid"
                v-for="(item, idx) in storeList"
                :key="idx"
                :label="item.storeName"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="show_work_nowDay">
        <div class="show_item_work">
          <div class="show_item_work_label">今日人数/项目数</div>
          <div class="show_item_work_number">{{curUserInfo.subscribeCountDay || '0'}}/{{curUserInfo.itemCountDay|| '0'}}</div>
        </div>
        <div class="show_item_work">
          <div class="show_item_work_label">本月人数/项目数</div>
          <div class="show_item_work_number">{{curUserInfo.subscribeCountMonth || '0'}}/{{curUserInfo.itemCountMonth|| '0'}}</div>
        </div>
        <div class="show_item_work">
          <div class="show_item_work_label">本月卡耗（元）</div>
          <div class="show_item_work_number">{{curUserInfo.sumPriceMonth || '0'}}</div>
        </div>
      </div>
    </div>
    <div class="work_content">
      <div :class="['work_date', !showWorkBoard && 'hide_work_date']">
        <template v-if="showWorkBoard">
          <div class="work_date_select">
            <el-date-picker key="year"
              style="width: 155px;"
              v-model="selectYear"
              type="year"
              placeholder="选择年"
              format="yyyy年"
              value-format="yyyy"
              size="small"
              @change="changeYear">
            </el-date-picker>
            <el-date-picker key="month"
              class="ml10"
              style="width: 155px;"
              v-model="selectMonth"
              type="month"
              placeholder="选择月"
              format="MM月"
              value-format="yyyy-MM"
              size="small"
              @change="changeMonth">
            </el-date-picker>
          </div>
          <div class="show_calender">
            <div class="calender_week">
              <div class="calender_week_item"
                v-for="(item, idx) in weekList"
                :key="idx">{{item}}</div>
            </div>
            <div class="calender_list">
              <div :class="['calender_item', 
              item.inMonth && 'calender_item_curMonth', 
              (item.isSelect && startDate && endDate && startDate != endDate) && 'calender_item_curSelect',
              startDate == item.date && 'calender_item_curSelect_start',
              endDate == item.date && 'calender_item_curSelect_end']"
                v-for="(item, idx) in calendarList"
                :key="idx"
                @click="toSelectDate(idx)">
                <div class="calender_item_box">
                  <span :class="['calender_item_text', item.isCurrentDay && 'calender_item_currentDay']">{{item.day}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="reservation_status">
            <div class="reservation_status_label">预约状态</div>
            <el-checkbox-group v-model="statusCheck">
              <el-checkbox label="0"
                class="item_checkbox"> <span style="color: #5da9ef">待服务</span> </el-checkbox>
              <!-- <el-checkbox label="1"
                class="item_checkbox"> <span style="color: #FEC171">服务中</span> </el-checkbox> -->
              <el-checkbox label="3"
                class="item_checkbox"> <span style="color: #30B08F">已完成</span> </el-checkbox>
              <el-checkbox label="100"
                class="item_checkbox"> <span style="color: #E65D6E">已取消</span> </el-checkbox>
            </el-checkbox-group>
          </div>
        </template>

        <div class="opt_show_work_board"
          @click="toChangeWorkBoardStatus">
          <i :class="[showWorkBoard? 'el-icon-s-fold': 'el-icon-s-unfold']"></i>
        </div>
      </div>

      <ShowStoreReservationLife v-if="selectDate.length > 0 && selectStoreId"
        ref="storeReservation"
        :storeId="selectStoreId"
        :storeTitle="curUserInfo.storeName"
        :selectDate="selectDate"
        :dataStatus="statusCheck"
        @toRefreshData="toRefreshData"
        @liftViewInfo="toJumpShowDetail" />
    </div>
    <LifeProjectDetail :beauticianName="beauticianName"
      v-if="selectDay"
      :show="showDialog"
      :selectDay="selectDay"
      :selectUid="selectUid"
      @toCloseDialog="toCloseDialog" />
  </div>
</template>

<script>
import calendar from "@/utils/calendar"
import LifeProjectDetail from './lifeProjectDetail.vue'
import ShowStoreReservationLife from './showStoreReservationLife.vue'
import {
  currentUserInfo,
  lifiWorkInfo,
  getCanViewStore
} from "@/api/service/workbench";

export default {
  name: 'workbenchLife',
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      calendarList: [],
      weekList: ['一', '二', '三', '四', '五', '六', '日'],
      selectDate: [],
      selectYear: '',
      selectMonth: '',
      statusCheck: [],
      showWorkBoard: true,
      dataList: [],
      scrollLeft: 0,
      scrollTop: 0,
      showDialog: false,
      curUserInfo: {},
      selectDay: '',
      selectUid: '',
      beauticianName: '',
      storeList: [],
      selectStoreId: '',
      refreshTimes: ''
    }
  },
  components: {
    LifeProjectDetail,
    ShowStoreReservationLife
  },
  computed: {
    timeStr () {
      let t = new Date().getHours()
      if (t >= 5 && t < 9) {
        return '早上'
      } else if (t >= 9 && t < 12) {
        return '上午'
      } else if (t >= 12 && t < 18) {
        return '下午'
      } else {
        return '晚上'
      }
    },
    curYear () {
      if (this.selectMonth) {
        return this.selectMonth.split('-')[0]
      }
      return ''
    },
    curMonth () {
      if (this.selectMonth) {
        return this.selectMonth.split('-')[1]
      }
      return ''
    },
  },
  created () {
    let nowTime = new Date()
    let y = nowTime.getFullYear(), m = nowTime.getMonth() + 1, d = nowTime.getDate()
    this.selectYear = nowTime
    this.selectMonth = `${y}-${m < 10 ? '0' + m : m}`
    this.calendarList = calendar(this.curYear, this.curMonth)
    let curWeekList = this.getCurrentWeek(nowTime)
    this.calendarList.forEach(item => {
      curWeekList.forEach(val => {
        if (item.inMonth && item.date == val) {
          item.isSelect = true
          this.selectDate.push(item)
        }
      })
    })
    this.startDate = this.selectDate[0].date
    this.endDate = this.selectDate[this.selectDate.length - 1].date

    this.getViewStoreList()
  },
  activated () {
    this.scrollLeft = 0
    this.scrollTop = 0
  },
  // mounted () {
  // this.$nextTick(() => {
  //   this.$refs.workContent.addEventListener('scroll', this.workContentScroll, true)
  // })
  // },
  // beforeDestroy () {
  //   this.$refs.workContent.removeEventListener('scroll', this.workContentScroll)
  // },
  methods: {
    selectStoreChange () {
      this.getCurrentUserInfo()
    },
    async getViewStoreList () {
      let res = await getCanViewStore({ type: 'Life' })
      if (res) {
        let { data } = res
        this.storeList = data
        if (data.length == 1) {
          this.selectStoreId = data[0].storeUid
          this.getCurrentUserInfo()
        }
      }
    },
    async getCurrentUserInfo () {
      let res = await currentUserInfo({ type: 'curUserInfo', storeId: this.selectStoreId })
      if (res) {
        this.curUserInfo = res.data
      }
    },
    toJumpShowDetail (info) {
      this.selectDay = info.date
      this.selectUid = info.subscribeId
      this.beauticianName = info.technicianName
      this.showDialog = true
    },
    toCloseDialog () {
      this.showDialog = false
      this.selectDay = ''
      this.selectUid = ''
      this.beauticianName = ''
    },
    toRefreshData () {
      this.getCurrentUserInfo()
    },
    selectStoreChange () {
      this.getCurrentUserInfo()
    },
    async getViewStoreList () {
      let res = await getCanViewStore({ type: 'Life' })
      if (res) {
        let { data } = res
        this.storeList = data
        if (data.length == 1) {
          this.selectStoreId = data[0].storeUid
          this.getCurrentUserInfo()
        }
      }
    },
    async getCurrentUserInfo () {
      let res = await currentUserInfo({ type: 'Life', storeId: this.selectStoreId })
      if (res) {
        this.curUserInfo = res.data
      }
    },
    getCurrentWeek (nowTime) {
      let list = []
      let endDays = new Date(this.curYear, this.curMonth, 0).getDate(),
        endDayTime = new Date(this.curYear, this.curMonth, endDays).getTime()
      let curTimeStamp = nowTime.getTime()
      for (let i = 0; i < 7; i++) {
        let timeStamp = curTimeStamp + i * 86400000
        if (timeStamp <= endDayTime) {
          let date = new Date(timeStamp).format('yyyy-MM-dd')
          list.push(date)
        }
      }
      return list
    },
    toChangeWorkBoardStatus () {
      this.showWorkBoard = !this.showWorkBoard
    },
    changeYear (e) {
      this.selectMonth = `${e}-01`
      this.calendarList = calendar(this.curYear, this.curMonth)
      this.startDate = ''
      this.endDate = ''
    },
    changeMonth (e) {
      this.selectMonth = e
      this.calendarList = calendar(this.curYear, this.curMonth)
      this.startDate = ''
      this.endDate = ''
    },
    toSelectDate (idx) {
      let item = this.calendarList[idx]
      if (!item.inMonth) return

      let date = item.date
      if (!this.startDate || (this.startDate && this.endDate)) {
        this.startDate = date
        this.endDate = ''
        item.isSelect = true
      } else if (this.startDate && this.startDate != date) {
        this.endDate = date
        item.isSelect = true
      }

      if (this.getTimeStr(this.startDate) > this.getTimeStr(date)) {
        this.endDate = this.startDate
        this.startDate = date
      }

      if (this.endDate) {
        this.selectDate = []
        this.calendarList.forEach(val => {
          if (this.getTimeStr(this.startDate) <= this.getTimeStr(val.date) && this.getTimeStr(val.date) <= this.getTimeStr(this.endDate)) {
            val.isSelect = true
            this.selectDate.push(val)
          }
        })
      } else {
        this.calendarList.forEach(val => {
          if (val.date != this.startDate) {
            val.isSelect = false
          }
        })
      }
    },
    getTimeStr (date) {
      return new Date(date).getTime()
    },
  }
}
</script>

<style lang="scss" scoped>
.workbench-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.show_work_data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 16px;
  .show_worker_info {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    .worker_info_deteil {
      flex: 1;
      overflow: hidden;
      margin-left: 10px;
      .worker_info_1 {
        font-size: 20px;
        color: #333;
        margin-bottom: 12px;
      }
      .worker_info_2 {
        font-size: 14px;
        color: #999;
        display: flex;
        align-items: center;
      }
    }
  }
  .show_work_nowDay {
    display: flex;
    align-items: center;
    .show_item_work {
      padding: 0 20px;
      &:not(:last-child) {
        border-right: 1px solid #eee;
      }
      .show_item_work_label {
        font-size: 12px;
        color: #333;
        margin-bottom: 16px;
        text-align: center;
      }
      .show_item_work_number {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
      }
    }
  }
}
.work_content {
  flex: 1;
  overflow: hidden;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;

  .work_date {
    width: 320px;
    position: relative;
    transition: all 0.3s;
    height: 100%;
    .work_date_select {
      display: flex;
      padding-bottom: 10px;
    }
    .opt_show_work_board {
      position: absolute;
      bottom: 0;
      right: 10px;
      font-size: 28px;
      color: #999;
      cursor: pointer;
    }
  }
  .hide_work_date {
    width: 50px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  }
  .show_calender {
    width: 320px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    .calender_week {
      display: flex;
      background-color: #f9f9f9;
      padding: 0 20px;
      .calender_week_item {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: #999;
      }
    }
    .calender_list {
      width: 320px;
      padding: 0 20px;
      display: flex;
      flex-wrap: wrap;
      .calender_item {
        font-size: 12px;
        color: #999;
        height: 40px;
        padding: 4px 0;
        .calender_item_box {
          height: 100%;
          width: 40px;
          padding: 4px 0;
        }
        .calender_item_text {
          display: block;
          width: 24px;
          height: 24px;
          margin: 0 auto;
          line-height: 24px;
          text-align: center;
          border-radius: 18px;
        }
        .calender_item_currentDay {
          color: #5da9ef;
        }
      }
      .calender_item_curMonth {
        color: #333;
        cursor: pointer;
        .calender_item_text {
          &:hover {
            background-color: #5da9ef;
            color: #fff;
          }
        }
      }
      .calender_item_curSelect {
        border-radius: 0;
        .calender_item_box {
          background-color: rgba(93, 169, 239, 0.15);
        }
      }
      .calender_item_curSelect_start {
        .calender_item_box {
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
          margin-left: 8px;
          width: 32px;
        }
        .calender_item_text {
          margin-left: 0;
          background-color: #5da9ef;
          border-radius: 50%;
          color: #fff;
        }
      }
      .calender_item_curSelect_end {
        .calender_item_box {
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
          margin-right: 8px;
          width: 32px;
        }
        .calender_item_text {
          margin-right: 0;
          background-color: #5da9ef;
          border-radius: 50%;
          color: #fff;
        }
      }
    }
  }

  .reservation_status {
    margin-top: 16px;
    .reservation_status_label {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .item_checkbox {
      display: block;
      margin-bottom: 10px;
    }
  }
}
</style>